<template>
  <div>
    <van-popup v-model:show="show" position="bottom" round>
      <div class="cascader">
        <div class="top">
          <div class="handle-title">
            <div class="cancel" @click="cancelHandle">取消</div>
            <div class="center">选择地址</div>
            <div class="confirm" @click="confirmHandle">确认</div>
          </div>
          <div class="dot">
            <div
              class="dot-item"
              :class="{
                dot_active: index === data.swiperIndex,
                active: data.selectOptions[index],
              }"
              v-for="(item, index) in data.dotItem"
              :key="index"
              @click="dotHandle(index)"
            >
              {{ item }}
            </div>
          </div>
        </div>
        <div class="main">
          <van-swipe
            ref="swiperRef"
            @change="swiperChange"
            class="swiper"
            :loop="false"
          >
            <van-swipe-item
              class="scroll-item"
              v-for="(list, _i) in data.options"
              :key="_i"
            >
              <div
                @click="liHandle(item, _i)"
                class="li"
                :class="{
                  li_active: data.selectOptions[_i] === item.value,
                }"
                v-for="item in list"
                :key="item.value"
              >
                {{ item.label }}
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import {
  Popup as VanPopup,
  Swipe as VanSwipe,
  SwipeItem as VanSwipeItem,
} from "vant";
import { regionData } from "element-china-area-data";
const Props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["confirm", "update:show"]);
// const show = ref(true);
const swiperRef = ref(null);
const data = reactive({
  dotItem: ["省份/地区", "城市", "区县"],
  swiperIndex: 0,
  options: [regionData],
  selectOptions: ["", "", ""],
});
/**
 * item 是children的数据
 * index 是当前具体哪个 swiper-item的index
 */
const liHandle = (item, index) => {
  data.selectOptions[index] = item.value;
  data.dotItem[index] = item.label;
  // 当选择了 还原dotItem
  switch (index) {
    case 0:
      data.dotItem[1] = "城市";
      data.dotItem[2] = "区县";
      data.selectOptions[1] = "";
      data.selectOptions[2] = "";
      break;
    case 1:
      data.dotItem[2] = "区县";
      data.selectOptions[2] = "";
      break;
  }
  // 当下一个渲染的list有数据时 进行替换
  if (data.options[index + 1]) {
    data.options[index + 1] = item.children;
    swiperRef.value.next();
    return;
  }

  // 当全是空时 直接添加
  if (item.children && index < 2) {
    data.options.push(item.children);
    swiperRef.value.next();
  }
};
const swiperChange = (index) => {
  data.swiperIndex = index;
};
const dotHandle = (index) => {
  swiperRef.value.swipeTo(index);
};
const cancelHandle = () => {
  // show.value = false
  emit("update:show", false);
};
const confirmHandle = () => {
  // show.value = false
  const res = data.dotItem.join(" ");
  emit("update:show", false);
  emit("confirm", res);
  // emit("update:modelValue", res);
};
// console.log(data.options);
</script>

<style lang="less" scoped>
.cascader {
  height: 400px;
  .top {
    width: 100%;
    height: 88px;
    box-sizing: border-box;
    padding: 16px 20px 0;
    border-bottom: 1px solid #e8ebf0;
    .handle-title {
      font-size: 17px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;
    }
    .cancel {
      color: #b4bccc;
    }
    .center {
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2c2d;
    }
    .confirm {
      color: #046eff;
    }
    .dot {
      display: flex;
      font-size: 15px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #b4bccc;
      padding-top: 5px;
      &-item {
        margin-right: 24px;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        /*文字超出宽度则显示ellipsis省略号*/
        text-overflow: ellipsis;
        max-width: 68px;
      }
      &_active::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -18px;
        display: block;
        width: 15px;
        height: 2px;
        background: #046eff;
      }
      .active {
        font-weight: 400;
        color: #2b2c2d;
      }
    }
  }
  .main {
    width: 100%;
    .swiper {
      width: 100%;
      height: 300px;
      .scroll-item {
        width: 100%;
        height: 300px;
        overflow: scroll;
      }
      .li {
        box-sizing: border-box;
        padding: 0 20px;
        width: 100%;
        height: 42px;
        line-height: 42px;
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #2b2c2d;
      }
      .li_active {
        background: rgba(4, 110, 255, 0.03);
      }
    }
  }
}
</style>